@mixin media-xs-only {
  @media only screen and (max-width: 767px) {
    @content;
  }
}

@mixin media-sm-and-up {
  @media only screen and (min-width: 768px) {
    @content;
  }
}

@mixin media-sm-only {
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    @content;
  }
}

@mixin media-sm-and-down {
  @media only screen and (max-width: 991px) {
    @content;
  }
}

@mixin media-md-and-up {
  @media only screen and (min-width: 992px) {
    @content;
  }
}

@mixin media-md-only {
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    @content;
  }
}

@mixin media-md-and-down {
  @media only screen and (max-width: 1199px) {
    @content;
  }
}

@mixin media-lg-and-up {
  @media only screen and (min-width: 1200px) {
    @content;
  }
}

@mixin media-lg-only {
  @media only screen and (min-width: 1200px) and (max-width: 1919px) {
    @content;
  }
}

@mixin media-lg-and-down {
  @media only screen and (max-width: 1919px) {
    @content;
  }
}

@mixin media-xl-only {
  @media only screen and (min-width: 1920px) {
    @content;
  }
}

// 多行溢出
@mixin t-ellipsis($line: 2) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

// 背景图
@mixin bg($path) {
  background-image: url('~@/assets/images/#{$path}');
  background-position: center;
  background-size: cover;
}

@mixin staticBg($path) {
  background-image: url('#{$staticUrl}#{$path}');
  background-position: center;
  background-size: cover;
}
